<template>
  <div class="body">
    <div v-if="Atll">
      <div class="tost">{{stationRulename}}</div>
      <div class="time-one">
        活动时间:{{startime}}至{{endtime}}
      </div>
      <!-- // 头图 -->
      <img
        class="han"
        src="../../assets/img/you/4.png"
        alt=""
      >
      <!-- 活动规则 -->
      <div
        class="rule"
        @click="onopen"
      >
        活动规则
      </div>
      <van-popup
        v-model="Fixed"
        class="boxed"
      >
        <div class="backgrend">
          <div class="gui">活动规则</div>
          参与本次活动前，请用户详细阅读活动规则及相关条款。凡参与本次活动，则视为用户已阅读、理解并同意活动规则及免责条款全部内容。
          <ul>
            <li>1.用户在活动中可以通过分享媛福达APP所生成的活动海报促成新用户下单的方式获得奖励金，累计获得的奖励金可以在媛福达APP
              中“我的-领红包”页面中进行查看。</li>
            <li>
              2.用户需要在对应页面规定时间内分享海报并促成媛福达APP新用户成功下单达到对应金额才可累积奖励金，如逾期未达到对应金额，所累积的奖励金均会失效，详情可以点击页面中“个人中心”进行查看。
            </li>
            <li>
              3.用户积累的奖励金金额符合提现标准，则媛福达APP会在整期活动结束7天后，在用户订单仍为有效状态的前提下，由系统统计数据并将奖励金存入用户购物卡余额中。
            </li>
            <li>
              4.在活动结束时，用户累积的拉新下单数达到15人以上且在本次活动排行榜前三名，则排名对应的排名奖励金将在整期活动结束7天后，在用户订单仍为有效状态的前提下，由系统统计数据并将奖励金存入用户购物卡余额中。
            </li>
            <li>5.用户领取的奖励金为赠金性质，赠金不做现金兑换，用户无法申请退款提现，奖励金将直接存入媛福达APP商城用户账户余额中。
            </li>
            <li>
              6.如用户以任何不正当手段或舞弊方式参与本活动，一经发现，媛福达APP有权对该用户的账号进行异常标记。对于账号异常的用户的奖励发放，媛福达APP有权采取不发放奖励、撤销剩余奖励等措施，亦有权收回用户可领取的金额，追讨已发放的金额，并保留追究该用户经济或法律责任的权利。媛福达APP不对因用户违规行为造成损失进行任何赔偿或补偿。不正当手段及舞弊行为包括但不限于：使用非法工具分享、下载、安装、注册、登录多个账号及其他不正当手段。
            </li>
            <li>
              7.如果用户存在违规行为（包括但不限于洗钱、虚假交易、赌博、恶意套现、作弊、刷单），媛福达APP有权在不事先通知的前提下取消违规用户的活动资格、并有权撤销相关违规交易、收回奖励（包括已消费金额）等利益，同时依照相关规则进行处理。如用户行为涉及违法的，一经发现媛福达APP将根据违规程度对违规用户采取相应的处理措施，情节严重者，媛福达APP将依法追究其法律责任。
            </li>
            <li>
              8.如因不可抗力或情势变更（包括但不限于重大自然灾害时间、政府主管部门指令停止举办或调整、活动遭受严重网络攻击或系统故障灯）导致本活动无法继续举办的，则媛福达APP有权随时决定暂停或终止本活动，并可依相关律法规的规定主张免责。
            </li>
            <li>
              9.依据相关法律法规规定，如店主在此次活动中为媛福达APP提供了推广服务，媛福达APP向店主支付现金红包等形式的劳务报酬时需履行代扣代缴义务；店主参与此次活动即表示同意并知晓以上纳税义务，如相关报酬需依法申报缴纳相应税款，媛福达APP将根据国家税务法规要求向税务机关提供必要的税务申报信息（包括店主的身份信息、报酬金额等税务机关要求的信息），并由媛福达APP依法为店主完成相应的纳税申报。
            </li>

            <li>
              关于本次活动的声明：媛福达公司有权在法律法规准许的范围内对本次活动规则做出解释并做适当调整。如有任何疑问，烦请联系媛福达APP官方在线客服。
            </li>

          </ul>
        </div>
        <div
          class="close"
          @click="closed"
        >我知道了</div>
      </van-popup>
      <!-- 拉新人数进度 -->
      <div class="speed">
        <!-- 人数规则 -->
        <div class="sopen">
          <span
            v-for="item in stage"
            :key="id"
          >{{item}}人</span>
        </div>
        <!-- 进度条组件 -->
        <van-progress
          :percentage="perce"
          :pivot-text="number"
          pivot-color="#F70062"
          color="linear-gradient(to right, #ffaaa9, #F70062)"
        />
        <!-- 奖励金额 -->
        <div class="soopen">
          <div
            v-for="item in staged"
            :key="id"
          >
            <div
              class="img"
              @click="gao"
            ></div>
            {{item}}元
          </div>
        </div>
        <div class="text">
          注：最终结算以妥投订单+7天为准
        </div>
      </div>
      <img
        src="../../assets/img/fen/banner.png"
        class="images"
        alt=""
      >
      <div
        class="buton"
        @click="queueMicrotask"
      >
        邀请海报
      </div>
      <!-- 前三排行榜 -->
      <img
        class="Ranking"
        src="../../assets/img/fen/paihangbang@2x.png"
        alt=""
      >
      <div class="Rankinge">
        <div
          class="two"
          v-for="item in Firstthree"
          :key="id"
        >
          <img
            class="Tou"
            :src="item.avtor == '' ? ceimg : item.avtor"
            alt=""
          >
          <div class="name">
            {{item.username == '' ? '媛福达会员' : item.username}}
          </div>
          <div class="additional">额外奖励{{item.rankReward}}元</div>
          <div class="wele">邀请人数：{{item.pullCount}}人</div>
          <div class="wele">获得奖励：{{item.totalReward}}元</div>
        </div>
      </div>
      <div class="gao">
        注：累积的拉新下单数达到15人以上才可领取排名奖励。
      </div>
      <!-- 总排行 -->
      <div class="Roude">
        <div class="headersd">
          <span>排名</span>
          <span>姓名</span>
          <span>邀请人数</span>
          <span>获得奖励</span>
        </div>
        <div class="Boxed">
          <ul>
            <li
              v-for="item in threeatare"
              :key="id"
            >
              <div class="one">{{item.ranking}}</div>
              <img
                :src="item.avtor == '' ? ceimg : item.avtor"
                alt=""
              >
              <div class="name">
                {{item.username == '' ? '媛福达会员' : item.username}}
              </div>
              <div class="number">{{item.pullCount}}人</div>
              <div class="money">
                {{item.gradeAmount}}元
              </div>
            </li>
          </ul>
        </div>
        <div class="mi">
          <ul>
            <li>
              <div class="one">{{mistare.ranking}}</div>
              <img
                :src="mistare.avtor == '' ? ceimg : mistare.avtor"
                alt=""
              >
              <div class="name">
                {{mistare.username == '' ? '媛福达会员' : mistare.username}}</div>
              <div class="number">{{mistare.pullCount}}人</div>
              <div class="money">
                {{mistare.gradeAmount}}元
              </div>
            </li>
          </ul>
        </div>
        <div
          class="Textd"
          @click="gocsdn"
        >查看更多</div>
      </div>
      <!-- 总排行弹窗 -->
      <van-popup
        v-model="csdne"
        class="boder"
        closeable
      >
        <div class="Roude">
          <div class="headersd">
            <span>排名</span>
            <span>姓名</span>
            <span>邀请人数</span>
            <span>获得奖励</span>
          </div>
          <div class="Boxed">
            <ul>
              <li
                v-for="item in allstare"
                :key="id"
              >
                <div class="one">{{item.ranking}}</div>
                <img
                  :src="item.avtor == '' ? ceimg : item.avtor"
                  alt=""
                >
                <div class="name">
                  {{item.username == '' ? '媛福达会员' : item.username}}
                </div>
                <div class="number">{{item.pullCount}}人</div>
                <div class="money">
                  {{item.gradeAmount}}元
                </div>
              </li>
            </ul>
          </div>
          <div class="mi">
            <ul>
              <li>
                <div class="one">{{mistare.ranking}}</div>
                <img
                  :src="mistare.avtor == '' ? ceimg : mistare.avtor"
                  alt=""
                >
                <div class="name">
                  {{mistare.username == '' ? '媛福达会员' : mistare.username}}
                </div>
                <div class="number">{{mistare.pullCount}}人</div>
                <div class="money">
                  {{mistare.gradeAmount}}元
                </div>
              </li>
            </ul>
          </div>
        </div>
      </van-popup>
      <!-- 我的收益 -->
      <img
        src="../../assets/img/fen/mymoney.png"
        class="imgEs"
        alt=""
      >
      <van-tabs
        v-model="activeName"
        @click="Hot"
        type="card"
        animated
        color='#ffffff'
        background='#e9c2c2'
        title-active-color='#000000'
        title-inactive-color='#797979'
      >
        <van-tab
          title="本期"
          name="true"
        >
          <div class="Box">
            <div class="one">
              <div class="number">{{period.myRank}}</div>
              <img
                :src="period.avtor == '' ? ceimg : period.avtor"
                alt=""
              >
              <div class="name-text">
                <div class="name">
                  {{period.username == '' ? '媛福达会员' : period.username}}
                </div>
                <div class="number">邀请
                  <span>{{period.pullCount}}</span>
                  新用户下单
                </div>
              </div>
            </div>
            <div class="two">
              <div class="Cumulative">
                <div class="Cumone">
                  +{{period.totalAmount}}元
                </div>
                <div class="Cumtwo">
                  累计收入
                </div>
              </div>
              <div class="Cumulative">
                <div class="Cumone">
                  {{period.pullCount}}人
                </div>
                <div class="Cumtwo">
                  成功邀请
                </div>
              </div>
              <div class="Cumulative">
                <div class="Cumone">
                  +{{period.unRecordAmount}}元
                </div>
                <div class="Cumtwo">
                  待入帐金额
                </div>
              </div>
            </div>
          </div>
        </van-tab>
        <van-tab
          title="上一期"
          name="false"
        >
          <div class="Box">
            <div
              class="kong"
              v-if="flag"
            >您之前没有参加过拉新活动</div>
            <div
              class="Topi"
              v-else
            >
              <div class="one">
                <div class="number">{{period.myRank}}</div>
                <img
                  :src="period.avtor == '' ? ceimg : period.avtor"
                  alt=""
                >
                <div class="name-text">
                  <div class="name">
                    {{period.username == '' ? '媛福达会员' : period.username}}
                  </div>
                  <div class="number">邀请
                    <span>{{period.pullCount}}</span>
                    新用户下单
                  </div>
                </div>
              </div>
              <div class="two">
                <div class="Cumulative">
                  <div class="Cumone">
                    +{{period.actualRecordAmount == 0 ? period.totalAmount : period.actualRecordAmount}}元
                  </div>
                  <div class="Cumtwo">
                    累计收入
                  </div>
                </div>
                <div class="Cumulative">
                  <div class="Cumone">
                    {{period.pullCount}}人
                  </div>
                  <div class="Cumtwo">
                    成功邀请
                  </div>
                </div>
                <div class="Cumulative">
                  <div class="Cumone">
                    +{{period.unRecordAmount}}元
                  </div>
                  <div class="Cumtwo">
                    待入帐金额
                  </div>
                </div>
              </div>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- 没有活动 -->
    <div
      class="null"
      v-else
    >
      <div class="tost">无活动</div>
      <div class="headered">
        <img
          src="../../assets/img/fen/null.png"
          alt=""
        >
        <div class="text">暂无可分享活动～</div>
      </div>
      <!-- 我的收益 -->
      <img
        src="../../assets/img/fen/mymoney.png"
        class="imgEs"
        alt=""
      >
      <div class="Box">
        <div
          class="kong"
          v-if="flag"
        >
          <div class="to">
            上一期
          </div>
          您之前没有参加过拉新活动
        </div>
        <div
          class="Topi"
          v-else
        >
          <div class="to">
            上一期
          </div>
          <div class="one">
            <div class="number">{{period.myRank}}</div>
            <img
              :src="period.avtor == '' ? ceimg : period.avtor"
              alt=""
            >
            <div class="name-text">
              <div class="name">
                {{period.username == '' ? '媛福达会员' : period.username}}
              </div>
              <div class="number">邀请
                <span>{{period.pullCount}}</span>
                新用户下单
              </div>
            </div>
          </div>
          <div class="two">
            <div class="Cumulative">
              <div class="Cumone">
                +{{period.totalAmount}}元
              </div>
              <div class="Cumtwo">
                累计收入
              </div>
            </div>
            <div class="Cumulative">
              <div class="Cumone">
                {{period.pullCount}}人
              </div>
              <div class="Cumtwo">
                成功邀请
              </div>
            </div>
            <div class="Cumulative">
              <div class="Cumone">
                +{{period.unRecordAmount}}元
              </div>
              <div class="Cumtwo">
                待入帐金额
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品 -->
    <img
      src="../../assets/img/fen/tui.png"
      class="imgEs"
      alt=""
    >
    <div class="add">
      <ul>
        <li
          v-for="item in list"
          :key="item.goods_id"
          @click="nav(item)"
        >
          <img
            :src="item.goods_img"
            class="img"
            alt=""
          >
          <div class="text">
            {{item.goods_name}}
          </div>
          <div class="money">
            ¥
            <span>{{item.active_price}}</span>
          </div>
        </li>
      </ul>
    </div>
    <!-- <div
      class="GoTo"
      @click="Goto"
    >前往主会场</div> -->
    <!-- @opened="createQRCode" -->
    <!-- 二维码生成 -->
    <template>
      <van-popup
        class="overf"
        round
        position="bottom"
        v-model="show"
        :style="{ height: '15rem' }"
      >
        <div class="invitePosterPage flex">
          <!-- v-if="Xshow" -->
          <van-swipe
            v-if="Xshow"
            @change="onChange"
            class="my-swipe"
            style="height:12rem;"
            indicator-color="blue"
          >
            <van-swipe-item
              v-for="item in img"
              :key="item.goods_id"
            >
              <img
                :src="item.path"
                alt=""
              >
            </van-swipe-item>
          </van-swipe>
          <div
            class="buton"
            @click="createQRCode"
          >{{Xshow == true ? '生成海报':'重新选择'}}</div>
          <!-- v-show="Xbox" -->
          <div class="Xbox">
            <img
              v-if="posterDataUrl"
              :src="posterDataUrl"
              id="imageWrapper"
              class="poster-bg"
              alt="邀请海报"
            />
            <div
              v-else
              id="poster"
              class="flex-row"
              style="position: relative"
            >
              <img
                class="posterbg"
                :src="Eimg"
                alt="邀请海报背景"
              />
              <canvas
                class="qr"
                id="qrCode-canvas"
              ></canvas>
            </div>
          </div>

        </div>
      </van-popup>
    </template>

    <!-- 置顶 -->
    <div
      class="totop"
      id="totop"
      @click="backTop"
      v-show="btnFlag"
    >
      <!-- <i class="iconfont icon-zhiding"></i> -->
    </div>
  </div>
</template>

<script>
import bridge from '../../js/js1'
import { Getmi, Yan, Recharge, receivetwo, GetNewall, Updown, index } from '@/api/index'
import { shared } from '../../js/Fen'
import { getSystem, openApp, getUrlQuery, parseKeyValue } from '../../js/js'
// import Vconsole from 'vconsole'
// const vConsole = new Vconsole()
import QRCode from 'qrcode'
import html2canvas from 'html2canvas';
import { commonCall } from '../../js/mUtils';
export default {
  name: 'Poster',
  data () {
    return {
      btnFlag: false,
      idcong: [],
      system: getSystem(),
      Eimg: require('../../assets/img/you/4.png'),
      img: [
        { path: require('../../assets/img/you/4.png'), id: 1 },
        // { path: require('../../assets/img/you/4.png'), id: 2 },
        // { path: require('../../assets/img/you/4.png'), id: 3 },
      ],// 背景图
      show: false, //弹出层
      Xshow: true,//轮播
      Xbox: false,// 海报
      posterDataUrl: '',
      share: true,
      qrCodeUrl: 'https://download.yuanfuda933.com/h5/other2.html#/null',// 地址
      number: '15093587830',
      imgurl: '',
      Fixed: false, // 活动规则弹窗
      number: '0', //拉新人数
      perce: '0',// 进度百分比
      Firstthree: [], // 前三排名
      endtime: '', //活动结束时间
      startime: '', // 活动开始时间
      stationRulename: '',// 活动名称
      stage: [],// 拉新阶段
      staged: [],// 拉新阶段奖励
      mistare: '',// 我的排名信息
      allstare: [], //总排名
      threeatare: [], // 除前三外排名
      ceimg: require('../../assets/img/share/yuan.png'), //为空显示图片
      csdne: false,// 总排行弹窗 
      activeName: 'true',// 传递本期上期参数
      flag: true, //上期收入显示
      period: '',// 本期--上期收入详情
      list: [],// 商品
      Atll: true, // 判断活动是否进行
      unamed: null, // 门店名称
      coded: null,// 门店编码
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollToTop);
  },
  created () {
    this.create()
    this.system = getSystem()
  },
  mounted () {
    window.addEventListener('scroll', this.scrollToTop)
    this.Token()
    // this.Getpople()
  },
  methods: {
    // Goto () {
    //   // this.$toast('周年庆典，敬请期待')
    //   window.location.href = 'https://download.yuanfuda933.com/h5/other2.html#/anniversarye'
    // },
    //获取商品
    async create () {
      try {
        const res = await index({
          id: 93
        })
        this.list = res.data.data.types[0].goods
        console.log(res.data.data.types);
      } catch (err) {
        console.log('错误');
      }
    },
    // 跳转下载
    nav (item) {
      console.log(item.goods_id);
      // window.locaition.href = 'http://yuanfuda933.oss-cn-zhangjiakou.aliyuncs.com/yfdMall_1_v1.0.1.apk?squId=' + 'item.goods._id'
      window.location.href = 'yfd://yfdmall:8080/goodsDetail?spuId=' + item.goods_id
    },
    href (uri, blank = true) {
      const a = document.createElement('a')
      a.style.display = 'none'
      a.href = uri
      if (blank) a.setAttribute('target', '_blank')
      document.body.appendChild(a)
      a.click()
      setTimeout(t => {
        document.body.removeChild(a)
      }, 0)
    },
    // 根据参数获取本期上期数据
    Hot (id) {
      if (this.Atll == false) {
        Updown({
          isCurrentActivity: false
        }).then(res => {
          // console.log(res);
          // 判断上一期
          if (res.data.code == 1007) {
            this.flag = true
            // this.$toast(res.data.msg)
            return false
          } else {
            this.flag = false
          }
          // 本期---上期
          this.period = res.data.data
        }).catch(err => {
          console.log(err);
        })
      }
      const tokened = this.$store.state.gettoken.token
      if (tokened) {
        Updown({
          isCurrentActivity: id
        }).then(res => {
          console.log(res.data.code);
          // 判断上一期
          if (res.data.code == 1007) {
            this.flag = true
            console.log('没有上一期');
            // this.$toast(res.data.msg)
            return false
          } else {
            this.flag = false
          }
          // 本期---上期
          this.period = res.data.data
        }).catch(err => {
          console.log(err);
        })
      } else {
        this.$toast('请先登录！');
        return false
      }
    },
    // 显示更多排行弹窗
    gocsdn () {
      this.csdne = true
    },
    // 规则弹窗
    onopen () {
      this.Fixed = true
    },
    gao () {
      this.$toast('活动结束统一发放奖励')
    },
    // 关闭
    closed () {
      this.Fixed = false
    },
    // 测试
    // 获取验证码
    huo (id) {
      Yan({
        mobiles: id
      }).then(res => {
        console.log(res.data.msg);
      }).catch(err => {
        console.log(err);
      })
    },
    // 获取前三拉新人数和信息排行
    Getpople () {
      const tokened = this.$store.state.gettoken.token
      // console.log(tokened);
      if (tokened) {
        GetNewall().then(res => {
          // console.log(res);
          // 判断活动是否存在显示yu隐藏
          if (res.data.code == 200) {
            // 控制显示
            this.Atll = true
            this.number = res.data.data.myPullCount.toString()
            // 判断人数
            if (res.data.data.myPullCount == 0) {
              console.log(this.perce);
            } else if (res.data.data.myPullCount == 1) {
              // this.perce = parseInt(res.data.data.myPullCount / 10 * 100 + 10) // 百分比
              this.perce = 12
            }
            else if (res.data.data.myPullCount == 2) {
              this.perce = 34
            }
            else if (res.data.data.myPullCount == 3) {
              this.perce = 42
            }
            else if (res.data.data.myPullCount == 4) {
              this.perce = 50
            }
            else if (res.data.data.myPullCount == 5) {
              this.perce = 65
            }
            else if (res.data.data.myPullCount == 6) {
              this.perce = 70
            }
            else if (res.data.data.myPullCount == 7) {
              this.perce = 75
            }
            else if (res.data.data.myPullCount == 8) {
              this.perce = 80
            } else {
              this.perce = 100
            }
            const First = res.data.data.activityRule //拉新阶段对象
            const resd = []// 拉新阶段
            const resed = []// 拉新阶段奖励
            for (var i in First) {
              resd.push(i)
              resed.push(First[i])
            }
            this.stage = resd
            this.staged = resed
            this.endtime = res.data.data.endTime
            this.startime = res.data.data.startTime
            this.stationRulename = res.data.data.stationRuleName // 活动规则名称
            this.Firstthree = res.data.data.personRewardInfoVos // 前三排名
          } else {
            // 控制隐藏
            this.Atll = false
            this.$toast('当前没有上线活动！')
          }
        }).catch(err => {
          console.log(err);
        })
      } else {
        this.$toast('请先登录！');
        return false
      }
    },
    // 获取本次全部排行
    Gemi () {
      const tokened = this.$store.state.gettoken.token
      if (tokened) {
        Getmi().then(res => {
          console.log(res);
          if (res.data.code == 200) {
            //我的排名
            this.mistare = res.data.data.myActivityDetailVo
            // 总排名
            this.allstare = res.data.data.myActivityDetailVoList
            // 除前三外排名
            this.threeatare = res.data.data.myActivityDetailVoList.slice(3, 99999)
            // 传递店主信息
            // 店主id
            var id = res.data.data.myActivityDetailVo.stationId
            //店主名称
            var name = res.data.data.myActivityDetailVo.stationName
            this.unamed = res.data.data.myActivityDetailVo.stationName
            // 店主编号
            var bian = res.data.data.myActivityDetailVo.stationCode
            this.coded = res.data.data.myActivityDetailVo.stationCode
            console.log(bian);
            this.qrCodeUrl = "https://download.yuanfuda933.com/h5/other2.html#/null?uid=" + id + "&uname=" + name + "&ubian=" + bian;
            // this.qrCodeUrl = "http://h.yuanfudagroup.com/h5/#/null?uid=" + id + "&uname=" + name + "&ubian=" + bian;
          }

        }).catch(err => {
          console.log('接口出错');
          console.log(err);
        })
      } else {
        console.log('失败没有token了');
      }
    },
    // 周年礼遇测试 
    // 获取当前登录用户历史充值信息，新用户返回null
    cong () {
      const tokened = this.$store.state.gettoken.token
      if (tokened) {
        Recharge().then(res => {
          // console.log(res);
          const obj = res.data.data.list
          const resd = []
          obj.forEach((i, index) => {
            resd.push(res.data.data.list[index].id)
          });
          console.log(resd);
          this.idcong = resd
        }).catch(err => {
          console.log('接口出错');
          console.log(err);
        })
      } else {
        console.log('失败没有token了');
      }
    },
    //  领取优惠卷
    ling () {
      const tokened = this.$store.state.gettoken.token
      if (tokened) {
        receivetwo(
          this.idcong
        ).then(res => {
          console.log(res.data.msg);
        }).catch(err => {
          console.log(err);
        })
      } else {
        console.log('失败没有token了');
      }
    },
    // 点击图片回到顶部方法，加计时器是为了过渡顺滑
    backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
    },
    // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
    scrollToTop () {
      const that = this
      let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      that.scrollTop = scrollTop
      // console.log(that.scrollTop);
      if (that.scrollTop > 800) {
        that.btnFlag = true
      } else {
        that.btnFlag = false
      }
    },
    // 获取token
    Token () {
      this.getToken(token => {
        this.$store.commit('getUser', token)
      })
      let that = this
      setTimeout(function () {
        that.Getpople()
        that.Gemi()
        that.Hot(that.activeName)
      }, 500)
      // this.$toast.loading({
      //   message: '加载中...',
      //   forbidClick: true,// 禁用背景点击
      //   loadingType: 'spinner', // 加载样式
      // });
      const tokened = this.$store.state.gettoken
      console.log(tokened);
    },
    getToken (callback) {
      const system = getSystem()
      if (system.android) {
        bridge.dsCall('getToken', '', res => {
          if (typeof res === 'string') res = JSON.parse(res)
          callback(res)
        })
        return
      }
      if (system.iOS) {
        bridge.iosReg('myTokenmethd', res => {
          const token = parseKeyValue(res)
          // const token = qs.parse(res)
          callback(token)
        })
        bridge.iosCall('getToken', '', res => { })
      }
    },
    onChange (index) {
      // console.log(index);
      if (index == 0) {
        this.Eimg = this.img[index].path
        this.posterDataUrl = ''
      } else if (index == 1) {
        this.Eimg = this.img[index].path
        this.posterDataUrl = ''
      } else {
        this.Eimg = this.img[index].path
        this.posterDataUrl = ''
      }
    },
    shareEndFail () {
      this.$toast.clear();
    },
    // 这里把图片转base64
    base64ToBlob (code) {
      let parts = code.split(';base64,')
      let contentType = parts[0].split(':')[1]
      let raw = window.atob(parts[1])
      let rawLength = raw.length
      let uInt8Array = new Uint8Array(rawLength)
      for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i)
      }
      return new Blob([uInt8Array], { type: contentType })
    },
    queueMicrotask () {
      // this.$toast('活动未开始，敬请期待')
      if (this.coded && this.unamed) {
        window.pageYOffset = 0;
        document.documentElement.scrollTop = 0
        document.body.scrollTop = 0;
        this.show = true
      } else {
        this.$toast('门店信息有误，请及时联系APP客服')
      }

    },
    // 关闭执行
    // close () {
    //   // console.log(this.posterDataUrl);
    //   if (this.posterDataUrl) {
    //     // 调用分享
    //     shared({
    //       image: this.posterDataUrl,
    //       share: this.share
    //     })
    //   }
    // },
    // 生成二维码并合并图片
    async createQRCode () {
      this.Xshow = !this.Xshow
      this.posterDataUrl = ''
      //先用 QRCode 生成二维码 canvas，然后用 html2canvas 合成整张海报并转成 base64 显示出来
      let canvas = document.getElementById('qrCode-canvas')
      QRCode.toCanvas(canvas, this.qrCodeUrl, (error) => {
        if (error) {
          this.$toast("生成失败请重试！");
          console.log(error)
        } else {
          this.$toast("生成成功！");
          //qrcode 生成的二维码会带有一些默认样式，需要调整下
          canvas.style.width = '2.38rem'
          canvas.style.height = '2.38rem'

          let poster = document.getElementById('poster')
          html2canvas(poster, {
            scrollY: 0,
            scrollX: 0,
          }).then(canvas => {
            this.posterDataUrl = canvas.toDataURL()
            if (this.posterDataUrl) {
              var that = this
              setTimeout(function () {
                that.show = false
                // 调用分享
                shared({
                  image: that.posterDataUrl,
                  share: that.share
                })
              }, 1000)
            }
          });
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
.body {
  overflow: hidden;
  min-width: 320px;
  max-width: 750px;
  width: 10rem;
  // height: 91.28rem;
  background: -webkit-linear-gradient(top, #ff6765, #a11918);
  margin: 0 auto;
  line-height: 1.5;
  font-family: Arial, Helvetica;
  .totop {
    position: fixed;
    width: 1.2rem; /* 40/16 */
    height: 1.2rem;
    border-radius: 1.25rem /* 20/16 */;
    opacity: 0.8;
    background: url("../../assets/ding.png") no-repeat;
    background-size: contain;
    box-shadow: 0 1px 5px 0 #e0e0e0;
    right: 0.125rem; /* 18/16 */
    bottom: 3rem; /* 64/16 */
    z-index: 1100;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
  }
  .van-popup {
    width: 10rem;
    overflow: hidden;
    background: transparent;
    // overflow-y: scroll;
    // overflow-x: hidden;
  }
  .my-swipe {
    width: 7.106667rem;
    margin: 0 auto;
    .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    }
  }
  .Btn {
    float: left;
    width: 33.333%;
    background: #e8f4f9;
    img {
      display: block;
      margin: 0 auto;
      width: 1.5rem;
      height: 1.5rem;
      border-radius: 0.533333rem;
    }
    .Text {
      text-align: center;
      font-size: 0.4rem;
    }
  }
  .invitePosterPage {
    width: 10rem;
    .title {
      font-size: 0.38rem;
    }
    .van-button {
      margin: 0.4rem auto;
    }
    .poster-bg {
      display: block;
      margin: 0.066667rem auto 0;
      width: 7rem;
      height: 10rem;
      // width: 6.106667rem;
      // height: 9.453333rem;
      position: relative;
    }
    .posterbg {
      display: block;
      margin: 4.066667rem auto 0;
      width: 9.6rem;
      height: 14rem;
      position: relative;
    }
    .qr {
      position: absolute;
      left: 40%;
      bottom: 0%;
    }
  }
  .tost {
    width: 6.666667rem;
    text-align: center;
    margin: 0.666667rem auto 0.266667rem;
    font-size: 0.48rem;
    color: #ffffff;
    font-weight: 600;
  }
  .time-one {
    width: 10rem;
    text-align: center;
    font-size: 0.373333rem;
    color: #ffc600;
  }
  .han {
    display: block;
    width: 9.226667rem;
    height: 14.106667rem;
    border-radius: 0.4rem;
    margin: 0.266667rem auto;
  }
  // 进度条
  .speed {
    width: 9.306667rem;
    height: 4.986667rem;
    border-radius: 0.266667rem;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0.066667rem 0.066667rem 0.566667rem #ff514f inset;
    margin: 0.133333rem auto;
    .sopen {
      margin-top: 0.466667rem;
      width: 9.306667rem;
      height: 0.533333rem;
      display: flex;
      span {
        width: 25%;
        text-align: center;
        font-size: 0.32rem;
        color: #373636;
      }
    }
    .soopen {
      margin-top: 0.466667rem;
      width: 9.306667rem;
      height: 2.033333rem;
      display: flex;
      div {
        width: 25%;
        text-align: center;
        font-size: 0.32rem;
        color: #373636;
        .img {
          margin: 0.133333rem auto;
          width: 0.96rem;
          height: 1.12rem;
          background: url("../../assets/img/fen/hong.png") no-repeat;
          background-size: contain;
        }
        .imge {
          margin: 0.133333rem auto;
          width: 0.96rem;
          height: 1.12rem;
          background: url("../../assets/img/fen/hui.png") no-repeat;
          background-size: contain;
        }
      }
    }
    .van-progress {
      margin: 0.4rem auto;
      width: 8.453333rem;
      height: 0.16rem;
    }
    .text {
      margin: 0.266667rem auto 0;
      width: 6rem;
      font-size: 0.266667rem;
      color: #ff2929;
      text-align: center;
    }
  }
  // 排行榜
  .Ranking {
    width: 10rem;
    height: 2.24rem;
  }
  .Rankinge {
    width: 10rem;
    height: 8.613333rem;
    background: url("../../assets/img/fen/success.png") no-repeat;
    background-size: contain;
    margin: 0 auto;
    display: flex;
    box-sizing: border-box;
    padding-top: 3.8rem;
    padding-left: 0.566667rem;
    padding-right: 0.566667rem;
    .two:nth-child(2) .Tou {
      margin-top: 0.22667rem;
    }
    .two:nth-child(3) .Tou {
      margin-left: 0.72333rem;
    }
    .two {
      width: 33%;
      .Tou {
        width: 1.566667rem;
        height: 1.566667rem;
        border-radius: 0.666667rem;
        margin-left: 0.76333rem;
        margin-top: 0.436667rem;
      }
      .name {
        text-align: center;
        width: 100%;
        font-size: 0.373333rem;
        color: #000000;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
      .additional {
        text-align: center;
        width: 100%;
        font-size: 0.266667rem;
        color: #ffaa18;
        margin: 0.066667rem auto;
      }
      .wele {
        margin-top: 0.053333rem;
        text-align: center;
        width: 100%;
        font-size: 0.266667rem;
        color: #666666;
      }
    }
  }
  .images {
    display: block;
    width: 9.36rem;
    height: 4.4rem;
    margin: -0.166667rem auto 0;
  }
  // 活动规则弹窗
  .rule {
    z-index: 99;
    position: fixed;
    width: 1.706667rem;
    height: 0.666667rem;
    background-color: rgba(255, 255, 255, 0.7);
    font-size: 0.32rem;
    color: #000000;
    text-align: center;
    line-height: 0.666667rem;
    border-top-left-radius: 0.266667rem;
    border-bottom-left-radius: 0.266667rem;
    right: 0%;
    top: 4.16rem;
  }
  .boxed {
    width: 8.453333rem;
    height: 14.373333rem;
    border-radius: 0.266667rem;
    background: transparent;
    .backgrend {
      box-sizing: border-box;
      padding: 0.32rem;
      border-radius: 0.266667rem;
      text-indent: 1em;
      width: 8.453333rem;
      height: 12.373333rem;
      background: #f4f4f4;
      font-size: 0.48rem;
      color: #362c2c;
      overflow: auto;
      .gui {
        width: 2.666667rem;
        font-size: 0.533333rem;
        color: #362c2c;
        font-weight: 600;
        margin: 0.2rem 2.333333rem 0.2rem;
      }
    }
    img {
      display: block;
      position: absolute;
      bottom: 0;
      left: 20%;
      width: 5.44rem;
      height: 1.92rem;
    }
  }
  .close {
    margin: 0.366667rem auto 0;
    text-align: center;
    font-size: 0.48rem;
    line-height: 1.066667rem;
    color: #ffffff;
    width: 5.333333rem;
    height: 1.066667rem;
    border-radius: 0.533333rem;
    background: -webkit-linear-gradient(top, #ffd82f, #ff7d00);
  }
  .buton {
    margin: 0.406667rem auto;
    text-align: center;
    font-size: 0.48rem;
    line-height: 1.066667rem;
    color: #ffffff;
    width: 5.333333rem;
    height: 1.066667rem;
    border-radius: 0.533333rem;
    background: -webkit-linear-gradient(top, #ffd82f, #ff7d00);
  }
  @-webkit-keyframes scrollText1 {
    0% {
      -webkit-transform: translateY(0px);
    }
    20% {
      -webkit-transform: translateY(-30px);
    }
    40% {
      -webkit-transform: translateY(-60px);
    }
    60% {
      -webkit-transform: translateY(-90px);
    }
    80% {
      -webkit-transform: translateY(-120px);
    }
    100% {
      -webkit-transform: translateY(-150px);
    }
  }

  @keyframes scrollText1 {
    0% {
      transform: translateY(0px);
    }
    20% {
      transform: translateY(-30px);
    }
    40% {
      transform: translateY(-60px);
    }
    60% {
      transform: translateY(-90px);
    }
    80% {
      transform: translateY(-120px);
    }
    100% {
      transform: translateY(-150px);
    }
  }
  //总排行
  .Roude {
    position: relative;
    width: 9.306667rem;
    height: 9.28rem;
    border-radius: 0.266667rem;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0.066667rem 0.066667rem 0.566667rem #ff514f inset;
    margin: 0.133333rem auto;
    .headersd {
      width: 100%;
      height: 1.533333rem;
      display: flex;
      span {
        font-weight: 600;
        width: 25%;
        margin-top: 0.6rem;
        margin-left: 0.266667rem;
        font-size: 0.373333rem;
        color: #ffacac;
      }
    }
    .Boxed {
      width: 9.306667rem;
      height: 5rem;
      box-sizing: border-box;
      // overflow: hidden;
      overflow-y: scroll;
      overflow-x: hidden;
      ul {
        // top: 0px;
        // -webkit-animation: scrollText1 8s infinite cubic-bezier(1, 0, 0.5, 0);
        // animation: scrollText1 8s infinite cubic-bezier(1, 0, 0.5, 0);
        li {
          width: 100%;
          height: 1.333333rem;
          overflow: hidden;
          display: flex;
          .one {
            font-size: 0.373333rem;
            color: #000000;
            margin-left: 0.533333rem;
            margin-top: 0.4rem;
          }
          img {
            margin-left: 0.8rem;
            display: block;
            margin-top: 0.146667rem;
            border-radius: 0.8rem;
            width: 1.066667rem;
            height: 1.066667rem;
          }
          .name {
            margin-left: 0.266667rem;
            margin-top: 0.366667rem;
            text-align: center;
            width: 2.266667rem;
            font-size: 0.373333rem;
            color: #000000;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .number {
            margin-left: 0.133333rem;
            margin-top: 0.366667rem;
            width: 1.2rem;
            font-size: 0.373333rem;
            text-align: center;
            color: #000000;
          }
          .money {
            margin-top: 0.366667rem;
            text-align: center;
            width: 2.933333rem;
            font-size: 0.373333rem;
            color: #000000;
          }
        }
        li:hover {
          animation-play-state: paused;
          -webkit-animation-play-state: paused;
        }
      }
    }
    .mi {
      position: absolute;
      bottom: 13%;
      margin-left: 0.16rem;
      width: 9.006667rem;
      ul {
        li {
          border-radius: 0.666667rem;
          width: 100%;
          height: 1.333333rem;
          background: #ffeeed;
          overflow: hidden;
          display: flex;
          .one {
            font-size: 0.373333rem;
            color: #000000;
            margin-left: 0.533333rem;
            margin-top: 0.4rem;
          }
          img {
            margin-left: 0.8rem;
            display: block;
            margin-top: 0.146667rem;
            border-radius: 0.8rem;
            width: 1.066667rem;
            height: 1.066667rem;
          }
          .name {
            margin-left: 0.266667rem;
            margin-top: 0.366667rem;
            text-align: center;
            width: 2.266667rem;
            font-size: 0.373333rem;
            color: #000000;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .number {
            margin-left: 0.133333rem;
            margin-top: 0.366667rem;
            width: 1.2rem;
            font-size: 0.373333rem;
            text-align: center;
            color: #000000;
          }
          .money {
            margin-top: 0.366667rem;
            text-align: center;
            width: 2.933333rem;
            font-size: 0.373333rem;
            color: #000000;
          }
        }
      }
    }
    .Textd {
      position: absolute;
      bottom: 4%;
      left: 42%;
      font-weight: 600;
      font-size: 0.373333rem;
      color: #a11918;
      text-align: center;
    }
  }
  //总排行弹窗
  .boder {
    width: 9.36rem;
    height: 15.24rem;
    background: transparent;
    border-radius: 0.4rem;
    overflow: hidden;
    .Roude {
      padding-top: 0.4rem;
      height: 100%;
      .Boxed {
        height: 11.8rem;
      }
      .mi {
        bottom: 4%;
      }
    }
  }
  .imgEs {
    width: 10rem;
    height: 1.173333rem;
    margin: 0.5rem auto;
  }
  //我的收益
  .van-tabs--card /deep/ .van-tabs__wrap {
    height: 1.066667rem;
    .van-tabs__nav--card {
      border: 0;
      height: 1.066667rem;
      border-radius: 0.266667rem;
      .van-tab.van-tab--active {
        border-radius: 0.266667rem;
        .van-tab__text--ellipsis {
          font-weight: 600;
        }
      }
    }
  }
  // tab栏内容
  .van-tab__pane-wrapper {
    height: 5.933333rem;
    .Box {
      width: 9.466667rem;
      height: 5.333333rem;
      border-radius: 0.166667rem;
      margin: 0.266667rem auto;
      background: #ffffff;
      overflow: hidden;
      .one {
        display: flex;
        height: 3.146667rem;
        .number {
          width: 1.6rem;
          margin: auto 0;
          font-size: 0.373333rem;
          color: #fb2726;
          text-align: center;
        }
        img {
          padding-left: 0.4rem;
          padding-right: 0.4rem;
          display: block;
          text-align: center;
          margin: auto 0;
          border-radius: 1rem;
          width: 1.36rem;
          height: 1.36rem;
        }
        .name-text {
          width: 3.633333rem;
          margin: auto 0;
          text-align: center;
          .name {
            font-size: 0.453333rem;
            color: #434343;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .number {
            width: 100%;
            font-size: 0.32rem;
            color: #b4b4b4;
            span {
              font-size: 0.426667rem;
              color: #ffaa18;
            }
          }
        }
      }
      .two {
        display: flex;
        .Cumulative {
          width: 3.146667rem;
          margin: auto 0;
          text-align: center;
          border-right: 0.026667rem solid #eeeeee;
          .Cumone {
            font-size: 0.533333rem;
            color: #414143;
          }
          .Cumtwo {
            margin-top: 0.206667rem;
            color: #8f8f9e;
            font-size: 0.293333rem;
          }
        }
      }
      .kong {
        font-size: 0.533333rem;
        width: 100%;
        height: 1.066667rem;
        text-align: center;
        margin-top: 1.833333rem;
        font-weight: 600;
      }
    }
  }
  .add {
    width: 9.466667rem;
    overflow: hidden;
    padding-top: 0.4rem;
    padding-left: 0.206667rem;
    ul li {
      float: left;
      width: 4.56rem;
      height: 6.64rem;
      border-radius: 0.166667rem;
      background: #ffffff;
      margin-bottom: 0.133333rem;
      margin-left: 0.166667rem;
      .img {
        width: 3.493333rem;
        height: 3.173333rem;
        margin-top: 0.773333rem;
        margin-left: 0.506667rem;
      }
      .text {
        margin: 0.206667rem auto 0;
        width: 3.093333rem;
        height: 1.033333rem;
        font-weight: 600;
        font-size: 0.373333rem;
        color: #333333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
      }
      .money {
        margin-left: 0.646667rem;
        // width: 1.333333rem;
        // height: 0.426667rem;
        font-size: 0.373333rem;
        color: #ff301e;
        span {
          font-size: 0.613333rem;
        }
      }
    }
  }
  .GoTo {
    border-radius: 0.266667rem;
    width: 9.04rem;
    height: 1.36rem;
    margin: 0.4rem auto;
    text-align: center;
    line-height: 1.36rem;
    font-size: 0.48rem;
    color: #ffffff;
    font-weight: 600;
    background: -webkit-linear-gradient(top, #ffd82f, #ff7d00);
  }
  // 活动未开始
  .null {
    .headered {
      width: 9.226667rem;
      height: 12.106667rem;
      margin: 0.533333rem auto;
      border-radius: 0.4rem;
      background: #ffdddd;
      img {
        width: 4.64rem;
        height: 4.266667rem;
        margin-left: 2.346667rem;
        margin-top: 2.133333rem;
      }
      .text {
        margin: 0 auto;
        font-size: 0.373333rem;
        color: #414141;
        text-align: center;
      }
    }
    .Box {
      width: 9.466667rem;
      height: 6.333333rem;
      border-radius: 0.166667rem;
      margin: 0.266667rem auto;
      background: #ffffff;
      overflow: hidden;
      .Topi {
        .to {
          margin-top: 0.133333rem;
          height: 0.533333rem;
          font-weight: 600;
          font-size: 0.373333rem;
          color: #000000;
          text-align: center;
        }
      }

      .one {
        display: flex;
        height: 3.146667rem;
        .number {
          width: 1.6rem;
          margin: auto 0;
          font-size: 0.373333rem;
          color: #fb2726;
          text-align: center;
        }
        img {
          padding-left: 0.4rem;
          padding-right: 0.4rem;
          display: block;
          text-align: center;
          margin: auto 0;
          border-radius: 1rem;
          width: 1.36rem;
          height: 1.36rem;
        }
        .name-text {
          width: 3.633333rem;
          margin: auto 0;
          text-align: center;
          .name {
            font-size: 0.453333rem;
            color: #434343;
            font-weight: 600;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
          .number {
            width: 100%;
            font-size: 0.32rem;
            color: #b4b4b4;
            span {
              font-size: 0.426667rem;
              color: #ffaa18;
            }
          }
        }
      }
      .two {
        display: flex;
        .Cumulative {
          width: 3.146667rem;
          margin: auto 0;
          text-align: center;
          border-right: 0.026667rem solid #eeeeee;
          .Cumone {
            font-size: 0.533333rem;
            color: #414143;
          }
          .Cumtwo {
            margin-top: 0.206667rem;
            color: #8f8f9e;
            font-size: 0.293333rem;
          }
        }
      }
      .kong {
        font-size: 0.533333rem;
        width: 100%;
        height: 1.066667rem;
        text-align: center;
        margin-top: 0.833333rem;
        font-weight: 600;
      }
    }
  }
  .gao {
    text-align: center;
    font-size: 0.32rem;
    color: #ffc600;
  }
}
</style>
